<template>
  <!-- 查看试验记录弹窗 -->
  <a-modal v-bind="$attrs" v-on="$listeners" title="查看试验记录列表" :visible.sync="dialogVisible" @cancel="handleCancel">
    <!--  -->
    <a-table bordered :loading="loading" :data-source="dataSource" :columns="columns" :rowKey="record => record.id" size="default" style="width: 100%; overflow-x: auto;" :pagination="false">
        <span slot="actions" slot-scope="text, record, $index">
          <template>
            <a @click="handleManage(2, record)">查看详情</a>
          </template>
        </span>
      </a-table>
    <!-- 页脚操作栏 -->
    <div slot="footer" class="btn_box">
      <a-button type="primary" @click="handleCancel">关闭</a-button>
    </div>
  </a-modal>
</template>

<script>
import { experimentPlan } from '@/api/quality/quality' // api
export default {
  name: 'a' + Date.now(),
  components: {
  },
  props: {
    // 显隐控件
    visible: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 表单
    form: {
      type: Object,
      default() {
        return null
      }
    }
  },
  computed: {
    // 与父组件绑定visible
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (e) {
        this.$emit('update:visible', e)
      }
    },
    // 试验计划表头
    columns() {
      let columns = [
        {
          title: '试件编号',
          dataIndex: 'specimenNum'
        },
        {
          title: '部位',
          dataIndex: 'place'
        },
        {
          title: '送检时间',
          dataIndex: 'inspectionTime'
        },
        {
          title: '试验结果',
          dataIndex: 'testResult.name'
        },
        {
          title: '操作',
          dataIndex: 'actions',
          width: '180px',
          fixed: 'right',
          scopedSlots: { customRender: 'actions' }
        }
      ]
      return columns
    }
  },
  data() {
    return {
      dataSource: [],
      loading: false
    }
  },
  methods: {
    handleCancel() {
      this.dialogVisible = false
    },
    handleManage(type, record) {
      this.dialogVisible = false
      let query = {
        editModel: type
      }
      if (record) {
        query.id = record.id
      }
      this.$router.push({
        name: 'experimentTableEdit',
        query
      })
    },
  },
  watch: {
    visible(e) {
      if (e) {
        if (this.form.id && this.form.detailId) {
          this.loading = true
          experimentPlan.getRecordList(this.form).then(res => {
            if (res.data) {
              this.dataSource = res.data
            }
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        }
        
      }
    }
  }
}
</script>
